<template>
    <div class="second_level_page sale_statistics_page">
        <section class="tab_section">
            <!--:class="this.checkedEmp===2? 'tab active':'tab'"-->
            <div class="tab">仓库统计</div>
            
        </section>
        <section class="statistics_main" style="text-align:center" >
            

            <select v-model="selected" @click="showOuter" @blur="fadeOuter">
                <option v-bind:value="1" >
                   全部
                </option>
                <option v-for="option in options" v-bind:value="option">
                {{option}}
                </option>
            </select>



            <ul class="choose_time">
                <li  :class="this.checkedTime===1? 'active':''" >
                    <div @click="thisDay">今天</div>
                </li>
                <li :class="this.checkedTime===2? 'active':''">
                    <div  @click="thisMouth">本月</div>
                </li>
                <li  :class="this.checkedTime===3? 'active':''">
                    <div @click="lastMouth">上月</div>
                </li >
                <li :class="this.checkedTime===4? 'active':''">
                   <div  @click="toChoseTime()">自定义时间段</div>
                </li>
            </ul>
            <div class="text">
                <div class="left" style="color:#666666; font-size:.3rem">时间段:&emsp;{{startAndEnd(this.startTime,this.endTime)}}</div>
                <div class="right" style="color:red"></div>
                <div class="clear" style="color:red"></div>
            </div>

            <div  class="table mar " >
                <div class="row  ">
                    <div class="cell"></div>
                    <div class="cell">进货</div>
                    <div v-if="" class="cell">出货</div>
                </div>
                
            </div>

             <div  class="table" >
                <div class="row head_row">
                    <div class="cell">单数</div>
                    <div class="cell">{{this.warehouseIn.orderNum}}</div>
                    <div class="cell">{{this.warehouseOut.orderNum}}</div>
                </div>
                
            </div>
            <div class="table" >
                <div class="row head_row">
                    <div class="cell">件数</div>
                    <div class="cell">{{this.warehouseIn.buyNum}}</div>
                    <div class="cell">{{this.warehouseOut.buyNum}}</div>
                </div>

               
            </div>
            <div class="table" >
                <div class="row head_row last">
                    <div class="cell">金额</div>
                    <div class="cell">{{fmoney(this.warehouseIn.allMoney,2)}}</div>
                    <div class="cell">{{fmoney(this.warehouseOut.allMoney,2)}}</div>
                </div>
            </div>
        </section>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>



        <div id="outer" v-show="show"> </div>




    </div> 
</template>

<script>           
    import {mapState} from 'vuex'
    import {StatisticalOfSale,getWarehose,StatisticalOfwarehouse} from 'src/service/getData'
    import {fmoney} from 'src/config/mUtils'

    export default {
        data(){
            return{
                token:'',
                flagTime:1,
                startTime : '',
                endTime : '',
                checkedTime:1,
                options:[
                        ],
                selected:1,
                warehouseOut:'',
                warehouseIn:'',
                show:false        
            }
        },
        mounted(){
            if(this.$route.query.token)
                this.token = this.$route.query.token;
            else
                this.token=this.userInfo.token;
            if(this.$route.query.startTime){
                this.startTime = this.$route.query.startTime;
                this.endTime = this.$route.query.endTime;
            }
            this.initData();
        },
        components: {
        }, 
        computed:{
        ...mapState([
            'userInfo',
            ])
        },        
        methods:{
        /*...mapMutations([
           'SAVE_AVANDER'
        ]),*/
        fmoney(s, n){
            return fmoney(s, n)
        },
        showOuter(){
            this.show=!this.show
            
        },
        fadeOuter(){
            this.show=false
        },
      
        
        toChoseTime(){
            this.checkedTime=4;
            this.$router.replace({path:'/profile/statistics/warehouseStatistics/choseTime',query:{
                toIndex:2
            }});
        },
        startAndEnd(startTime,endTime){
            if(startTime!=''&&endTime=='')
                return startTime;
            if(startTime==''&&endTime=='')
                return '';
            else
                return "    "+startTime+"——"+endTime;
        },
        thisDay(){
            this.checkedTime=1;
            this.flagTime=1;
            this.startTime='';
            this.endTime='';
            this.StatisticalOfwarehouse();
        },
        thisMouth(){
            this.checkedTime=2;
            this.flagTime=2;
            this.startTime='';
            this.endTime='';
            this.StatisticalOfwarehouse();
        },
        lastMouth(){
            this.checkedTime=3;
            this.flagTime=3;
            this.startTime='';
            this.endTime='';
            this.StatisticalOfwarehouse();
        },

       
        initData(){
            if(this.token=="")
            {
                this.token = this.userInfo.token;
            }

            this.StatisticalOfwarehouse();
            this.getWarehose();
        },
        async  StatisticalOfwarehouse(){
            if(this.token=="")
            {
                this.token = this.userInfo.token;
            }
            let response = await StatisticalOfwarehouse(this.token,this.startTime,this.endTime,this.flagTime,this.selected);
            if(response.resultMessage!="null")
            {
                this.startTime = response.resultMessage;
                this.endTime = '';
            }
            let data = response.data;
            this.warehouseOut = data[0];
            this.warehouseIn = data[1];
        },
        async  getWarehose(){
            let response = await getWarehose(this.token);
            let data = response.data;
            this.options = data;
        },

    },
    watch: {
        $route: function (value){
            if (this.$route.query.startTime) {
              if(this.$route.query.startTime){
                this.startTime = this.$route.query.startTime;
                this.endTime = this.$route.query.endTime;
                }
              this.initData();
            }
        },
        selected: function(val) {
            if(val=='全部')
                this.selected=1;
            else
                this.selected=val;
            this.initData(); 
        }
    }
}
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.32rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .statistics_main{
        margin-top: 1.08rem;
        background: #fff;
        .choose_time{
            padding: .4rem .48rem;
            li{
                float: left;
                @include wh(.92rem, .4rem);
                margin-right: .56rem;
                div{
                    @include wh(100%, 100%);
                    @include sc(.3rem, $blue);
                    text-align: center;
                    border-radius: .2rem;
                }
            }
            li:last-child{
                margin-right: 0;
                width: 2.1rem;
            }
            li.active{
                div{
                    background: $blue;
                    color: #fff;
                }
            }
        }
        .text{
            padding: .4rem .48rem ;
            div{
                @include sc(.26rem, #666);
            }
        }
        .table{
            padding: .1rem .5rem ;
            .row{
                display: flex;
                // margin-bottom: .4rem;
                .cell{
                    flex: 1;
                    @include sc(.28rem, #333);
                    text-align: center;
                   
                  
                }
            }
            .head_row{
                margin: .118rem 0;
                .cell{
                    color: #333;
                }
            }

            .footer_row{
                margin-top: .02rem;
                margin-bottom: 0;
                .cell{
                    color: #c8574b;
                }
            }
        }
    }


select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
 

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  border: solid .02rem #999999;
 
  width:7.1rem;
  border-radius:.1rem;
  height:.7rem;
  padding-left:.2rem;
  z-index:500


  /*在选择框的最右侧中间显示小箭头图片*/
  // background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  // padding-right: 14px;
}





/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }


    #outer{

        width:100%;
        height:100vh;
        // height:calc(75vh - 0.9rem);
        background: rgba(66,66,66,0.3);
        position:absolute;
        bottom:0;

    }
    .mar{
        margin:.1rem 0  .13rem 0;
        height:.4rem;
        line-height:.4rem;
       .cell{
        color:#666666 !important
       }


    }
    .last{
        margin-bottom:.7rem !important
    }
</style>
